<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滴答办公系统-员工新增</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="media/layui/css/layui.css" media="all">
<script type="text/javascript" src="media/js/jquery.min.js"></script>
</head>
<body>
	<div class="layui-container" style="margin-top: 5px">
		<form class="layui-form" action="staffadd.do" method="post" >
			<div class="layui-form-item">
				<label class="layui-form-label">员工工号</label>
				<div class="layui-input-block">
					<input type="text" name="no" lay-verify="name" autocomplete="off" placeholder="请输入工号" id="no" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">员工姓名</label>
				<div class="layui-input-block">
					<input type="text" name="name" id="name" lay-verify="name" autocomplete="off"
						placeholder="请输入姓名" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
            <label class="layui-form-label">所属部门</label>
	            <div class="layui-input-block">
	                <select name="did"  id="cds">
                     <option value="-1">--请选择部门--</option>
                  </select>
	            </div>
            </div>
            <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
	            <div class="layui-input-block">
	                <input type="radio" name="sex" value="男" title="男">
	                <input type="radio" name="sex" value="女" title="女">
	            </div>
        	</div>
	  		<div class="layui-form-item">
	            <label class="layui-form-label">邮箱</label>
	            <div class="layui-input-inline">
	                <input type="text" name="email" id="email" lay-verify="required" placeholder="请输入有效邮箱" autocomplete="off" class="layui-input">
	            </div>
	        </div>
	  		<div class="layui-form-item">
	            <label class="layui-form-label">手机号</label>
	            <div class="layui-input-inline">
	                <input type="text" name="phone" id="phone" lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input">
	            </div>
	        </div>
	  		<div class="layui-form-item">
	            <label class="layui-form-label">QQ</label>
	            <div class="layui-input-inline">
	                <input type="text" name="qq" id="qq" lay-verify="required" placeholder="请输入QQ号码" autocomplete="off" class="layui-input">
	            </div>
	        </div>
	  		<div class="layui-form-item">
	             <label class="layui-form-label">入职日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="createdate" id="date" autocomplete="off" class="layui-input">
                </div>
	        </div>
 			<div class="layui-form-item">
 				 <label class="layui-form-label">照片</label>
 				 <button type="button" class="layui-btn" id="upfile">
				  <i class="layui-icon">&#xe67c;</i>上传图片
				</button>
 				 <div class="layui-input-block" style="margin-top: 15px;">
 				 	<img alt="用户个性头像" id="img1" width="60%">
 				 </div>
 			</div>
			<div class="layui-form-item">
				<input class="layui-btn"  style="margin-left: 10%" onclick="modEmp()" value="确认修改">
			</div>
		</form>
	</div>


	<script src="media/layui/layui.js"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	<script>
    
    var picture = "";
		layui.use(['jquery', 'form','upload', 'layedit', 'laydate' ],function() {
      var form = layui.form, layer = layui.layer, layedit = layui.layedit, laydate = layui.laydate;
      var $ = layui.$, upload = layui.upload;
         
        //执行实例
        var uploadInst = upload.render({
          elem: '#upfile' //绑定元素
          ,url: '/emp/emp/modUploadEmpPhoto'//上传接口
          ,multiple: false
          ,data: {
            id: getQueryVariable("id")
          }
          ,done: function(obj){
            //上传完毕回调
            picture = obj.photo;
            var imgSrc = "/emp/upload/userHeadPhoto/" + obj.photo;
            $("#img1")[0].src = imgSrc;
            
            $("#img0").css('display','none');
            $("#img1").css('display','block');
          }
          ,error: function(){
            //请求异常回调
          }
        });
      //日期
      laydate.render({
        elem : '#date'
      });
      

      //自定义验证规则
      form.verify({
        title : function(value) {
          if (value.length < 5) {
            return '标题至少得5个字符啊';
          }
        },
        pass : [ /(.+){6,12}$/, '密码必须6到12位' ],
        content : function(value) {
          layedit.sync(editIndex);
        }
      });
      
      
      function init() {
        $.ajax({
          url: "/emp/emp/getEmp",
          type: "POST",
          dataType: "json",
          data: {
            id: getQueryVariable("id")
          }, //提交表单的数据
          success: function(res) {
            analyseData(res);
          },
          error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.status);
            alert(XMLHttpRequest.readyState);
            alert(textStatus);
          }
        });
      }
      
      init();
      
      function analyseData(data) {
        var no = data.emp.no;
        var name = data.emp.name;
        var did = data.emp.did;
        var sex = data.emp.sex;
        var email = data.emp.email;
        var qq = data.emp.qq;
        var phone = data.emp.phone;
        var createdate = data.emp.createdate;
        var photo = data.emp.photo;
        picture = photo;
        
        $("#no").val(no);
        $("#name").val(name);
        $("input[name='sex'][value='" + sex + "']").attr("checked",true);
        $("#email").val(email);
        $("#qq").val(qq);
        $("#phone").val(phone);
        $("#date").val(createdate);
        var imgSrc = "/emp/upload/userHeadPhoto/" + photo;
        $("#img1")[0].src = imgSrc;
        
        getDepart(did);
      }
      
      function getDepart(did) {
        $.ajax({
          url: "/emp/depart/getAllDeparts",
          type: "POST",
          dataType: "json",
          data: {}, //提交表单的数据
          success: function(res) {
           var options = "<option value=\"-1\">--请选择部门--</option>";
           for(var i = 0; i < res.departsList.length; i++) {
             if(did == res.departsList[i].id) {
               options += "<option value='" + res.departsList[i].id + "' selected=\"selected\">" + res.departsList[i].name + "</option>";
             }else{
               options += "<option value='" + res.departsList[i].id + "'>" + res.departsList[i].name + "</option>";
             }
           }
           // console.log(options);
           $('#cds').empty();
           $("#cds").append(options);
           
           form.render();  
          },
          error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.status);
            alert(XMLHttpRequest.readyState);
            alert(textStatus);
          }
        });
          
      }
      
		});
    
    function getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return pair[1];
        }
      }
      return (false);
    }
    
    
    function modEmp() {
      var no = $('#no').val();
      var name = $('#name').val();
      var did = $('#cds').val();
      var sex = $('input[name="sex"]:checked').val();
      var email = $('#email').val();
      var qq = $('#qq').val();
      var phone = $('#phone').val();
      var createdate = $('#date').val();
      var photo = picture;
      
      // console.log(sex);
      
      // console.log(picture);
      
      if(no != "" && name != "" && did != -1 && email != "" && qq != "" && phone != "" && createdate != "" && photo != "") {
        $.ajax({
          url: "/emp/emp/modEmp",
          type: "POST",
          dataType: "json",
          data: {
            id: getQueryVariable("id"),
            no: no,
            name: name,
            did: did,
            sex: sex,
            email: email,
            qq: qq,
            phone: phone,
            createdate: createdate,
            photo: photo
          }, //提交表单的数据
          success: function(res) {
            window.location.reload();
          },
          error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.status);
            alert(XMLHttpRequest.readyState);
            alert(textStatus);
          }
        });
      }else{
        alert("请完善员工信息！");
      }
    } 
	</script>
</body>
</html>